<div class="signin-content">
  <h1>Reset Password</h1>

  <mat-card>
    <mat-progress-bar mode='indeterminate' *ngIf='loading'></mat-progress-bar>
    <mat-card-content>
      <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()" *ngIf="!resetPasswordDone">
        <mat-form-field class="full-width-input" *ngIf="!token">
          <mat-label>Token</mat-label>
          <input type="password" matInput
            formControlName="token" required>
            <mat-error *ngIf="isFieldInvalid('token', 'required')">Please inform the reset password token</mat-error>
        </mat-form-field>
          <mat-form-field class="full-width-input">
            <mat-label>New Password</mat-label>
            <input type="password" matInput
              formControlName="newPassword" required>
              <mat-error *ngIf="isFieldInvalid('newPassword', 'required')">Please inform the new password</mat-error>
              <mat-error *ngIf="isFieldInvalid('newPassword', 'minlength')">Password should be at least 6 character</mat-error>
          </mat-form-field>
          <mat-form-field class="full-width-input">
            <mat-label>Confirm New Password</mat-label>
            <input type="password" matInput [errorStateMatcher]="matcher"
              formControlName="confirmNewPassword">
            <mat-error *ngIf="isPasswordMatchInvalid()">Passwords do not match</mat-error>
          </mat-form-field>
        <button mat-raised-button type="button" [disabled]="loading" routerLink="/login">Back to Login Page</button>
        <button mat-raised-button color="primary" [disabled]="loading">Submit</button>
      </form>

      <div *ngIf="resetPasswordDone">
        <p>Password has been reset.</p>
        <button mat-raised-button routerLink="/login">Back to Login Page</button>
      </div>

    </mat-card-content>
  </mat-card>
</div>
